<template>
  <div class="brand-info-container">
    <div class="brand-info">
      <div class="info">
        <i class="iconfont" style="color:#FF8640;margin-left: 10px; font-size:23px;">&#xe621;</i>
        <span>基本信息</span>
      </div>
      <div class="brand-info-fileds">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-row>
            <el-col :span="8">
              <el-form-item label="品牌中文名">
                <el-input v-model="brandInfo.brandCnName" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="品牌英文名">
                <el-input v-model="brandInfo.brandEnName" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="描述">
                <el-input v-model="brandInfo.brandDesc" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </div>
    </div>
    <div class="Authorizer">
      <div class="info">
        <i class="iconfont" style="color:#FF8640;margin-left: 10px;font-size: 22px; ">&#xe66f;</i>
        <span>公司的主体信息</span>
      </div>
      <el-form ref="companyForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="公司名称">
              <el-input v-model="companyInfo.companyName" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性质">
              <el-input :value="companyInfo.companyNature | companyNature" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账户名">
              <el-input v-model="companyInfo.bankAccountName" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="账号">
              <el-input v-model="companyInfo.bankAccountNumber" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="税号">
              <el-input v-model="companyInfo.registrationCode" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="padding:10px">
        <split-vertical title="联系方式"></split-vertical>
        <v-table :tableParams="tableParams"></v-table>
      </div>
    </div>
    <div class="authorizer-card">
      <div class="info">
        <i class="iconfont" style="color:#4FA1D9;margin-left: 10px; font-size: 26px;">&#xe691;</i>
        <span>授权信息</span>
      </div>
      <div style="padding:0 5px;">
        <v-table :tableParams="brandTable" v-on:handleOperation="handleOperation"></v-table>
      </div>
      <div class="add-authInfo" @click="addAuthInfo">
        <i class="el-icon-circle-plus-outline"></i><span>添加授权信息</span>
      </div>
      <el-dialog
        title="请选择授权来源"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-dialog
          width="60%"
          title="授权信息"
          :visible.sync="innerVisible"
          append-to-body>
          <el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="110px" class="form">

            <el-form-item label="授权方" prop="authorizingPartyId">
              <el-select v-model="form.authorizingPartyId" placeholder="请选择" >
                <el-option
                  v-for="item in authorizerList"
                  :key="item.id"
                  :label="item.companyName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="被授权方" prop="authorizedPartyId">
              <el-select v-model="form.authorizedPartyId" placeholder="请选择" >
                <el-option
                  v-for="item in authoriedList"
                  :key="item.id"
                  :label="item.companyName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="授权级别" prop="authorizationType">
              <el-select v-model="form.authorizationType" placeholder="请选择" size="medium" clearable>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="授权起止时间" prop="authorizationStartTime">
              <el-date-picker
                size="medium"
                v-model="form.authorizationStartTime"
                format="yyyy-MM-dd "
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="授权结束时间" prop="authorizationEndTime">
              <el-date-picker
                size="medium"
                v-model="form.authorizationEndTime"
                format="yyyy-MM-dd "
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
                    <!--            //插件-->
            <select-vo v-for="item in selectArray" :key="item"  @returnValue="returnValue" style="width: 68%;"></select-vo>
            <div style="margin-top:10px;">
              <el-button  icon="el-icon-circle-plus" @click.prevent="add"  size="mini"></el-button>
              <el-button icon="el-icon-delete" @click.prevent="deleteDomain"  size="mini"></el-button>
            </div>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="innerVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit('form')">确 定</el-button>
          </span>
        </el-dialog>
        <div class="select-brand">
          <div @click="selectBrand('A')">
            <img src="../../../assets/images/brand.png" height="180">
            <p>品牌方</p>
          </div>
          <div style="margin: 0 20px" @click="selectBrand('B')">
            <img src="../../../assets/images/my.png" height="180">
            <p>我们</p>
          </div>
        </div>
      </el-dialog>
    </div>
    <el-dialog
      title="授权区域限制详情"
      :visible.sync="authCompany"
      width="40%">
      <v-table :tableParams="authCompanyList" ></v-table>
    </el-dialog>
    <div class="brand-btn">
      <el-button size="medium" @click="cancelBrandAdd">返回上一级</el-button>
    </div>
  </div>
</template>
<script>

  import SplitVertical from "components/common/SplitVertical"
  import VForm from "components/common/VForm"
  import VButton from "components/common/VButton"
  import VTable from "components/common/PageTable/VTable"
  import {localStorage} from 'js/localStorage'
  import  SelectVo from 'components/common/selectVo.vue'
  let authorizingParty = {
    'A': "品牌方",
    'B': '我们'
  }
  let authLevel = {
    'A': '一级授权',
    'B': '二级授权'
  }
  export default {
    inject:['reload'],
    components: {
      VTable, VForm, SplitVertical, VButton,SelectVo
    },
    data() {
      return {
        i:1,
        selectArray:[1],
        show: false,
        isShow: true,
        list: [],
        authorizerList: [],
        authoriedList: [],
        authCompany:false,
        id: '',
        areaData: [],
        //授权级别
        options: [{
          value: 'A',
          label: '一级授权'
        },
          {
            value: 'B',
            label: '二级授权'
          }],
        area: [{
          value: 'A',
          label: '我司'
        },
          {
            value: 'B',
            label: '平台'
          }, {
            value: 'C',
            label: '合作公司'
          }],
        //图片
        dialogImageUrl: [],
        dialogVisible: false,
        FormShow: false,
        //弹窗
        dialogFormVisible: false,
        innerVisible: false,
        form: {
          authorizationType: '',
          authorizingPartyId: '',
          authorizedPartyId: '',
          authorizationStartTime: '',
          authorizationEndTime: '',
        },
        rules: {
          authorizationType: [
            {required: true, message: '请选择授权级别', trigger: 'blur'}
          ],
          authorizingPartyId: [
            {required: true, required: true, message: '请选择授权方', trigger: 'change'}
          ],
          authorizedPartyId: [
            {required: true, required: true, message: '请选择被授权方', trigger: 'change'}
          ],
          authorizationStartTime: [
            {required: true, message: '请选择授权开始时间', trigger: 'change'}
          ],
          authorizationEndTime: [
            {required: true, message: '请选择授权结束时间', trigger: 'change'}
          ],
          restrictions: [
            {required: true, message: '请选择限制区域', trigger: 'blur'}
          ]
        },
        tableParams: {
          showDefault: true,
          dataArray: [],
          showMultiSelection: false,
          showOperationColumn: false,
          columnArray: [
            {label: '联系人', prop: 'contactName', sortable: false},
            {label: '联系电话', prop: 'contactMobile', sortable: false},
            {label: '公司电话', prop: 'contactPhone', sortable: false},
            {label: '职位', prop: 'contactPosition', sortable: false},
            {label: '微信', prop: 'contactWeChat', sortable: false},
            {label: '邮箱', prop: 'contactEmail', sortable: false},
          ]
        },
        brandTable: {
          showDefault: true,
          dataArray: [],
          showMultiSelection: false,
          columnArray: [
            {label: '授权开始时间', prop: 'authorizationStartTime', sortable: false},
            {label: '授权结束时间', prop: 'authorizationEndTime', sortable: false},
            {label: '授权来源', prop: 'authorizationFrom', sortable: false},
            {label: '授权级别', prop: 'authorizationType', sortable: false},
            {label: '授权方', prop: 'authorizingPartyName', sortable: false},
            {label: '被授权方', prop: 'authorizedPartyName', sortable: false},
          ]
        },
        authCompanyList: {
          showDefault: false,
          dataArray: [],
          showMultiSelection: false,
          showOperationColumn: false,
          columnArray: [
            {label: '授权区域', prop: 'restrictArea', sortable: false},
            {label: '授权公司', prop: 'areaName', sortable: false},
          ]
        },
        userId: '',
        brandInfo: {},
        companyInfo: {},
        val: '',
        data: {},
        selectDirection: '',
        restrictions:[],
        rowBrandData:{}
      }
    },
    filters: {
      companyNature(val) {
        switch (val) {
          case "A":
            return '品牌方';
            break;
          case 'B':
            return '供应商';
            break;
          case 'C':
            return '品牌方/供应商';
            break;
          case 'D':
            return '平台';
            break;
          case "E":
            return '客户';
            break;
        }
      }
    },
    created() {
      this.userId = localStorage.get('userID')
      this.id = this.$route.query.id
      this.getLookVal()
      this.getCategory()

    },
    methods: {
      getCategory(){

      },

      returnValue(val) {
       if(val.areaId != "" && val.restrictArea != ""){
         // this.value[this.i]=val;
         this.restrictions.push(val)
       }

      },
      add(){
        this.i = this.i+1;
        this.selectArray.push(this.i);
      },
      deleteDomain() {
        this.selectArray.pop()
        this.restrictions.splice( this.i-1, 1);
      },
      //获取页面的信息
      getLookVal() {
        let parmas = {
          id: this.id
        }
        let success = data => {
          if (data.statusCode == '1') {
            this.brandInfo = data.body.brandInfo
            this.companyInfo = data.body.companyInfo
            this.tableParams.dataArray = this.companyInfo.contactInfos
            this.brandTable.dataArray = data.body.authorizationInfo
            this.brandTable.dataArray.forEach(ele => {
              ele.authorizationFrom = authorizingParty[ele.authorizationFrom]
              ele.authorizationType = authLevel[ele.authorizationType]
            })
          } else {
            this.$message.error(data.statusMessage)
          }
        }
        this.api.newBrandGetOne(parmas, success)
      },
      //添加授权信息
      addAuthInfo() {
        this.dialogVisible = true
      },
      over() {
        this.isShow = !this.isShow;
        this.show = !this.show
      },
      //选择来源
      selectBrand(val) {
        this.innerVisible = true
        this.dialogVisible = false
        this.selectDirection = val
        //被授权方
        this.authorized()

        let para = {
          authorizationFrom: val
        }
        let success = data => {
          if (data.statusCode === "1") {
            this.authorizerList = data.body
          } else {
            this.$message.error(data.statusMessage)
          }
        }
        this.api.brandListAuthorizer(para, success)
      },
      //被授权的接口
      authorized() {
        let success = data => {
          if (data.statusCode === "1") {
            this.authoriedList = data.body
          } else {
            this.$message.error(data.statusMessage)
          }
        }
        this.api.enterpriseListCompany({}, success)
      },
      getTemplateRow(index, row) {
        this.row = row
      },
      submit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submitBrandInfo()
          } else {
            return false;
          }
        });
      },
      //添加接口
      submitBrandInfo() {
        let para = this.form;
        para['brandId'] = this.brandInfo.id;
        para['authorizationFrom'] = this.selectDirection;
        para['restrictions'] = this.restrictions;
        para['userId'] = this.userId;
        // console.log(para,"参数")
        let succ = data => {
          if (data.statusCode === "1") {
            this.$message.success("添加成功")

            this.innerVisible=false;
            this.reload()
          } else {
            this.$message.error(data.statusMessage)
          }
        }
        this.api.addAuthorization(para, succ)
      },
      handleOperation(rowIndex, row, methodName) {
        this.id=row.id;
        this.rowBrandData=row;
        if(methodName == "view"){
          this.look()
        }else if(methodName == "delete"){
          this.delBrandInfo()
        }else{
          this.editBrand()
        }
      },
      look(){
        this.authCompany=true;
        let classify={
          "A":'我司',
          "B":'平台',
          "C":'合作公司'
        }
        this.$nextTick(()=>{
          this.authCompanyList.dataArray=this.rowBrandData.restriction;
          for(let val of this.authCompanyList.dataArray){
            val.restrictArea = classify[val.restrictArea]
          }
        })
      },
      delBrandInfo(){

      },
      editBrand(){

      },
      cancelBrandAdd() {
        this.$router.go(-1)
      },
    }
  }
</script>
<style scoped>
  .brand-info-container .el-button--mini.is-circle {
    padding: 1px;
  }

  .brand-info-container .el-message-box {
    position: absolute !important;
    top: 53px;
    right: 33px;
  }

  .brand-info-container .el-dialog__headerbtn {
    position: absolute;
    top: 9px;
    right: 20px;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 22px;
  }
  .form .el-select{
      width:50% ;
  }
  .form .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width:50% ;
  }

</style>
<style lang="scss" scoped>
  $color: 2px solid #e8e8e8;
  .brand-info-container {
    .brand-info {
      background: #fff;
      height: 120px;
      border-left: $color;
      border-right: $color;
      border-bottom: $color;

      .info {
        line-height: 45px;

        span {
          color: #606266;
          font-size: 15px;
        }
      }

      .brand-info-fileds {

      }

    }

    .Authorizer {
      background: #fff;
      height: auto;
      margin-top: 3px;
      border-left: $color;
      border-right: $color;
      border-bottom: $color;

      .info {
        line-height: 60px;

        span {
          color: #606266;
          font-size: 15px;
        }
      }

      .btn {
        padding: 10px 5px;
      }

      .Authorizer-query {
        margin-left: 20px;
      }
    }

    .authorizer-card {
      background: #fff;
      margin-top: 3px;
      border-left: $color;
      border-right: $color;
      border-bottom: $color;
      min-height: 200px;

      .info {
        line-height: 60px;

        span {
          color: #606266;
          font-size: 15px;
        }
      }

      .add-authInfo {
        padding-left: 10px;
        cursor: pointer;
        margin-top: 8px;

        i {
          font-size: 20px;
          color: #409EFF;
        }

        span {
          color: #409EFF;
          font-size: 14px;
        }
      }
    }
    .select-brand {
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;

      p {
        text-align: center;
      }
    }

    .brand-btn {
      width: 100%;
      text-align: center;
      padding-top: 20px;
    }
  }
</style>
